<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="/lib/pace/pace-theme-material.min.css">
  <script src="/lib/pace/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"blog.yookingh.cn","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":true,"style":"mac"},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":true,"color":"#00000000","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="前言 关于Hexo Hexo文档（本文或许有大量文档引用此处）  什么是Hexo Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。">
<meta property="og:type" content="article">
<meta property="og:title" content="开启Hexo之路">
<meta property="og:url" content="http://blog.yookingh.cn/blog/200512-hexo.html">
<meta property="og:site_name" content="墨染青葱几许烟">
<meta property="og:description" content="前言 关于Hexo Hexo文档（本文或许有大量文档引用此处）  什么是Hexo Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-05-13T00:59:01.000Z">
<meta property="article:modified_time" content="2020-05-14T11:26:05.490Z">
<meta property="article:author" content="yooking">
<meta property="article:tag" content="学习笔记">
<meta property="article:tag" content="Hexo">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://blog.yookingh.cn/blog/200512-hexo.html">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>开启Hexo之路 | 墨染青葱几许烟</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">墨染青葱几许烟</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">左手代码 右手诗意</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-首页">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-时间轴">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>时间轴</a>

  </li>
        <li class="menu-item menu-item-标签云">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签云</a>

  </li>
        <li class="menu-item menu-item-关于&留言">

    <a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于&留言</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <a href="https://github.com/yooking-git" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://blog.yookingh.cn/blog/200512-hexo.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/imgs/a_icon_head.jpg">
      <meta itemprop="name" content="yooking">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="墨染青葱几许烟">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          开启Hexo之路
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2020-05-13 08:59:01" itemprop="dateCreated datePublished" datetime="2020-05-13T08:59:01+08:00">2020-05-13</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/blog/" itemprop="url" rel="index"><span itemprop="name">想丶将博客写出精彩</span></a>
                </span>
            </span>

          
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="far fa-comment"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/blog/200512-hexo.html#valine-comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/blog/200512-hexo.html" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><ol>
<li><p><strong>关于Hexo</strong></p>
<p><a style="color:#1196EE" href="https://hexo.io/zh-cn/docs/" target="view_window">Hexo文档</a>（本文或许有大量文档引用此处）</p>
</li>
<li><p><strong>什么是Hexo</strong></p>
<p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 <a style="color:#1196EE" href="http://daringfireball.net/projects/markdown/" target="view_window">Markdown</a>（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。<a id="more"></a></p>
</li>
</ol>
<h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><ol>
<li><p><strong>Node.js</strong></p>
<p><a style="color:#1196EE" href="http://nodejs.org/" target="view_window">Node.js</a>(Node.js 版本需不低于 8.10，建议使用 Node.js 10.0 及以上版本)：Node.js 为大多数平台提供了官方的 <a style="color:#1196EE" href="https://nodejs.org/en/download/" target="view_window">安装程序</a>。对于中国大陆地区用户，可以前往 <a style="color:#1196EE" href="https://npm.taobao.org/mirrors/node" target="view_window">淘宝 Node.js 镜像</a> 下载。</p>
<ul>
<li><p><strong>npm</strong></p>
<p>允许用户从NPM服务器下载别人编写的第三方包到本地使用。</p>
<p>允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。</p>
<p>允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。</p>
</li>
<li><p><strong>npm命令</strong></p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 获取当前npm版本号（可用来测试npm是否安装成功）</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm -v</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 查看当前目录已安装的插件</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm list</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 为项目生成 node_modules 文件夹</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm i</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 安装指定插件</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install &lt;name&gt; [ -g ][ --save-dev ]</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 卸载指定插件</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm uninstall &lt;name&gt; [ -g ][ --save-dev ]</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 更新全部插件</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm update [ --save-dev ]</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 指定插件更新</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm update &lt;name&gt; [ -g ][ --save-dev ]</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 全局安装 全局安装在C:\Users\Administrator\AppData\Roaming\npm\node_modules</span></span><br><span class="line"><span class="meta">#</span><span class="bash">         非全局安装在 npm install生成的 node_modules 文件夹里</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> -global</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> -g</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 将安装的包写入package.json里面的 dependencies</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> dependencies：生产环境需要依赖的库</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> --save</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> -S</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 将安装的包写入packege.json里面的 devDependencies</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> devdependencies： 仅 开发环境下需要依赖的库</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> --save-dev</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> -D</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>cnpm</strong></p>
<p>淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> 安装cnpm</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install cnpm -g --registry=https://registry.npm.taobao.org</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 查看等级 cnpm和npm的命令区别只有 cnpm和npm 而已</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> cnpm -v</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p><strong>Git</strong></p>
<p>Windows：下载并安装 <a style="color:#1196EE" href="https://git-scm.com/download/win" target="view_window">git</a>。</p>
</li>
</ol>
<h2 id="安装和部署"><a href="#安装和部署" class="headerlink" title="安装和部署"></a>安装和部署</h2><ol>
<li><p><strong>安装Hexo</strong></p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash">----------------------全局安装法----------------------<span class="comment">#</span></span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install -g hexo-cli</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> ----------------------局部安装法----------------------<span class="comment">#</span></span></span><br><span class="line"><span class="meta">#</span><span class="bash"> 官方文档有提到局部安装方法（没用过，有兴趣的可以去尝试下）</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install hexo</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> 安装后有两种执行方式</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> 1</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npx install &lt;<span class="built_in">command</span>&gt;</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> 2 将Hexo所在目录下的node_modules添加到环境变量中即可直接使用hexo &lt;<span class="built_in">command</span>&gt;:</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">echo</span> <span class="string">'PATH="$PATH:./node_moduls/.bin"'</span> &gt;&gt; ~/.profile</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>建站</strong></p>
<p>安装完成后，部署Hexo个人站点空间(以下称为 %HEXO_HOME%)（eg:E:\HexoBlog）</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> %HEXO_HOME%</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> hexo init</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> npm install</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>网站配置</strong></p>
<p>站点配置文件：<code>%HEXO_HOME%\_config.yml</code></p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Hexo Configuration</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/configuration.html</span></span><br><span class="line"><span class="comment">## Source: https://github.com/hexojs/hexo/</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Site</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">墨染青葱几许烟</span> <span class="comment">#博客网站名称</span></span><br><span class="line"><span class="attr">subtitle:</span> <span class="string">'yooking的个人博客'</span> <span class="comment">#博客副标题</span></span><br><span class="line"><span class="attr">description:</span> <span class="string">''</span></span><br><span class="line"><span class="attr">keywords:</span></span><br><span class="line"><span class="attr">author:</span> <span class="string">yooking</span> <span class="comment">#作者名字</span></span><br><span class="line"><span class="attr">language:</span> <span class="string">zh-CN</span> <span class="comment">#语言</span></span><br><span class="line"><span class="attr">timezone:</span> <span class="string">''</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># 开启本地搜索</span></span><br><span class="line"><span class="attr">search:</span></span><br><span class="line">  <span class="attr">path:</span> <span class="string">search.xml</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">post</span></span><br><span class="line">  <span class="attr">format:</span> <span class="string">html</span></span><br><span class="line">  <span class="attr">limit:</span> <span class="number">10000</span></span><br><span class="line">  </span><br><span class="line"></span><br><span class="line"><span class="comment"># URL</span></span><br><span class="line"><span class="comment">## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'</span></span><br><span class="line"><span class="attr">url:</span> <span class="string">http://blog.yookingh.cn/</span> <span class="comment">#主页路径</span></span><br><span class="line"><span class="attr">root:</span> <span class="string">/</span></span><br><span class="line"><span class="comment">#文档路径 我这里是 url/文档中category字段的值/文档中path_name字段的值.html</span></span><br><span class="line"><span class="comment">#默认路径为日期</span></span><br><span class="line"><span class="attr">permalink:</span> <span class="string">:category/:path_name.html</span>  </span><br><span class="line"><span class="attr">permalink_defaults:</span></span><br><span class="line"><span class="attr">pretty_urls:</span></span><br><span class="line">  <span class="attr">trailing_index:</span> <span class="literal">true</span> <span class="comment"># 是否显示xxx.html?我选择是</span></span><br><span class="line">  <span class="attr">trailing_html:</span> <span class="literal">true</span> <span class="comment"># 是否显示.html?我依然选择是</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Directory</span></span><br><span class="line"><span class="attr">source_dir:</span> <span class="string">source</span></span><br><span class="line"><span class="attr">public_dir:</span> <span class="string">public</span></span><br><span class="line"><span class="attr">tag_dir:</span> <span class="string">tags</span></span><br><span class="line"><span class="attr">archive_dir:</span> <span class="string">archives</span></span><br><span class="line"><span class="attr">category_dir:</span> <span class="string">categories</span></span><br><span class="line"><span class="attr">code_dir:</span> <span class="string">downloads/code</span></span><br><span class="line"><span class="attr">i18n_dir:</span> <span class="string">:lang</span></span><br><span class="line"><span class="attr">skip_render:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Writing</span></span><br><span class="line"><span class="attr">new_post_name:</span> <span class="string">:title.md</span> <span class="comment"># File name of new posts</span></span><br><span class="line"><span class="attr">default_layout:</span> <span class="string">post</span></span><br><span class="line"><span class="attr">titlecase:</span> <span class="literal">false</span> <span class="comment"># Transform title into titlecase</span></span><br><span class="line"><span class="attr">external_link:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">false</span> <span class="comment"># Open external links in new tab</span></span><br><span class="line">  <span class="attr">field:</span> <span class="string">site</span> <span class="comment"># Apply to the whole site</span></span><br><span class="line">  <span class="attr">exclude:</span> <span class="string">''</span></span><br><span class="line"><span class="attr">filename_case:</span> <span class="number">0</span></span><br><span class="line"><span class="attr">render_drafts:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">post_asset_folder:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">relative_link:</span> <span class="literal">false</span></span><br><span class="line"><span class="attr">future:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">highlight:</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">line_number:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">auto_detect:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">tab_replace:</span> <span class="string">''</span></span><br><span class="line">  <span class="attr">wrap:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">hljs:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Home page setting 这是个插件 目的是隐藏某些文档不在首页战展示</span></span><br><span class="line"><span class="comment"># path: Root path for your blogs index page. (default = '')</span></span><br><span class="line"><span class="comment"># per_page: Posts displayed per page. (0 = disable pagination)</span></span><br><span class="line"><span class="comment"># order_by: Posts order. (Order by date descending by default)</span></span><br><span class="line"><span class="comment"># index2 generator是否包含官方的hexo-generator-index，默认true（包含）</span></span><br><span class="line"><span class="attr">index2_include_index:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">index2_generator:</span></span><br><span class="line">  <span class="attr">per_page:</span> <span class="number">10</span></span><br><span class="line">  <span class="attr">order_by:</span> <span class="string">-date</span> <span class="comment"># 按发布时间排序</span></span><br><span class="line">  <span class="attr">exclude:</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">tag</span> <span class="string">hide</span> <span class="comment"># 不包含标签为hide的文章</span></span><br><span class="line">    <span class="bullet">-</span> <span class="string">category</span> <span class="string">想丶把旅途画成色彩</span> <span class="comment"># 不包含分类为hide的文章</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># index_generator:</span></span><br><span class="line"><span class="comment">#  path: ''</span></span><br><span class="line"><span class="comment">#  per_page: 10</span></span><br><span class="line"><span class="comment">#  order_by: -date</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Category &amp; Tag 默认：uncategorized</span></span><br><span class="line"><span class="attr">default_category:</span> <span class="string">uncatalog</span></span><br><span class="line"><span class="comment">#categories 变量映射</span></span><br><span class="line"><span class="attr">category_map:</span></span><br><span class="line"> <span class="string">想丶给代码码上诗意:</span> <span class="string">dev</span></span><br><span class="line"> <span class="string">想丶为旅途涂上颜色:</span> <span class="string">travel</span></span><br><span class="line"> <span class="string">想丶将博客写出精彩:</span> <span class="string">blog</span></span><br><span class="line"><span class="attr">tag_map:</span></span><br><span class="line"> <span class="string">浏览器:</span> <span class="string">browser</span></span><br><span class="line"> <span class="string">项目开发:</span> <span class="string">proj</span></span><br><span class="line"> <span class="string">学习笔记:</span> <span class="string">study</span></span><br><span class="line"> <span class="string">旅游:</span> <span class="string">travel</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Metadata elements</span></span><br><span class="line"><span class="comment">## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta</span></span><br><span class="line"><span class="attr">meta_generator:</span> <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Date / Time format</span></span><br><span class="line"><span class="comment">## Hexo uses Moment.js to parse and display date</span></span><br><span class="line"><span class="comment">## You can customize the date format as defined in</span></span><br><span class="line"><span class="comment">## http://momentjs.com/docs/#/displaying/format/</span></span><br><span class="line"><span class="attr">date_format:</span> <span class="string">YYYY-MM-DD</span></span><br><span class="line"><span class="attr">time_format:</span> <span class="string">HH:mm:ss</span></span><br><span class="line"><span class="comment">## Use post's date for updated date unless set in front-matter</span></span><br><span class="line"><span class="attr">use_date_for_updated:</span> <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Pagination</span></span><br><span class="line"><span class="comment">## Set per_page to 0 to disable pagination</span></span><br><span class="line"><span class="attr">per_page:</span> <span class="number">10</span></span><br><span class="line"><span class="attr">pagination_dir:</span> <span class="string">page</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Include / Exclude file(s)</span></span><br><span class="line"><span class="comment">## include:/exclude: options only apply to the 'source/' folder</span></span><br><span class="line"><span class="attr">include:</span></span><br><span class="line"><span class="attr">exclude:</span></span><br><span class="line"><span class="attr">ignore:</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Extensions</span></span><br><span class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></span><br><span class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></span><br><span class="line"><span class="attr">theme:</span> <span class="string">next</span> <span class="comment"># 配置主题 我配置的是next 这个配置对应的路径为 %HEXO_HOME%/themes/next</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Deployment</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/deployment.html</span></span><br><span class="line"><span class="attr">deploy:</span></span><br><span class="line">  <span class="attr">type:</span> <span class="string">git</span></span><br><span class="line">  <span class="attr">repo:</span> <span class="comment"># 我这里配置了两个路径 一个是github 一个是coding</span></span><br><span class="line">    <span class="attr">github:</span> <span class="comment"># 填写自己的github路径</span></span><br><span class="line">    <span class="attr">coding:</span> <span class="comment"># 填写自己的coding路径</span></span><br><span class="line">  <span class="attr">branch:</span> <span class="string">master</span> <span class="comment"># 提交的分支</span></span><br><span class="line">  <span class="attr">message:</span> <span class="string">"博客更新:( <span class="template-variable">&#123;&#123; now('YYYY-MM-DD HH:mm:ss') &#125;&#125;</span>)"</span> <span class="comment">#提交时显示的文字</span></span><br><span class="line">  </span><br><span class="line">  <span class="comment">#博客文字统计</span></span><br><span class="line"><span class="attr">symbols_count_time:</span></span><br><span class="line">  <span class="attr">symbols:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">time:</span> <span class="literal">false</span></span><br><span class="line">  <span class="attr">total_symbols:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">total_time:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">exclude_codeblock:</span> <span class="literal">false</span></span><br><span class="line">  </span><br><span class="line"> <span class="comment"># mermaid chart</span></span><br><span class="line"><span class="attr">mermaid:</span> <span class="comment">## mermaid url https://github.com/knsv/mermaid</span></span><br><span class="line">  <span class="attr">enable:</span> <span class="literal">true</span>  <span class="comment"># default true</span></span><br><span class="line">  <span class="attr">version:</span> <span class="string">"7.1.2"</span> <span class="comment"># default v7.1.2</span></span><br><span class="line">  <span class="attr">options:</span>  <span class="comment"># find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js</span></span><br><span class="line">    <span class="comment">#startOnload: true  // default true</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>下载主题</strong></p>
<p>以nexT为例：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> <span class="built_in">cd</span> %HEXO_HOME%</span></span><br><span class="line"></span><br><span class="line"><span class="meta">#</span><span class="bash"> 路径可能会发声改变 具体请看主题官网介绍</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> 当前命令指定了安装位置 %HEXO_HOME%/themes/next</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> git <span class="built_in">clone</span> https://github.com/theme-next/hexo-theme-next themes/next</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>怎么配置主题文件</strong></p>
<p>主题文件初级配置：<a style="color:#1196EE" href="http://theme-next.iissnan.com/" target="view_window">官方文档</a>（ps:如果在官方文档中找不到你想要的，Google it，关注自己的版本号，不要搜版本号之前的了…很多你想要的功能已经被加入主题中了）</p>
<p>主题文件自定义方法（首先你要有一定的编程基础）：Chrome 、Fire Fox 等浏览器 F12 进入控制台，找到要修改的对应控件的对应class文件在<code>%HEXO_HOME%\themes\next\layout</code>中去找到并修改它即可。</p>
</li>
<li><p><strong>我的主题自定义配置</strong>(请注意<code>E:HexoBlog</code> 替换为自身的<code>%HEXO_HOME%</code>)</p>
<p><strong>文章末尾增加自定义版权信息</strong>：(效果见本文底部 - 另附非自定义方法 - 相对自定义来说更省事)</p>
<p>路径<code>E:\HexoBlog\themes\next\layout\_macro</code>中新增<code>my-copyright.swig</code></p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line">&#123;% if page.copyright %&#125;</span><br><span class="line">&lt;<span class="selector-tag">div</span> class=<span class="string">"my_post_copyright"</span>&gt;</span><br><span class="line">    &lt;script src=<span class="string">"//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"</span>&gt;&lt;/script&gt;</span><br><span class="line">    &lt;!-- JS库 sweetalert 可修改路径 --&gt;</span><br><span class="line">    &lt;script type=<span class="string">"text/javascript"</span> src=<span class="string">"http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"</span>&gt;&lt;/script&gt;</span><br><span class="line">    &lt;script src=<span class="string">"http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"</span>&gt;&lt;/script&gt;</span><br><span class="line">    &lt;link rel=<span class="string">"stylesheet"</span> type=<span class="string">"text/css"</span> href=<span class="string">"http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css"</span>&gt;</span><br><span class="line">    &lt;p&gt;</span><br><span class="line">        &lt;span&gt;本文标题:&lt;/span&gt;&#123;&#123; page<span class="selector-class">.title</span> &#125;&#125;</span><br><span class="line">    &lt;/p&gt;</span><br><span class="line">    &lt;p&gt;</span><br><span class="line">        &lt;span&gt;文章作者:&lt;/span&gt;&#123;&#123; theme<span class="selector-class">.author</span> &#125;&#125;</span><br><span class="line">    &lt;/p&gt;</span><br><span class="line">    &lt;p&gt;</span><br><span class="line">        &lt;span&gt;发布时间:&lt;/span&gt;&#123;&#123; page<span class="selector-class">.date</span>.format(<span class="string">"YYYY年MM月DD日 - HH:mm:ss"</span>) &#125;&#125;</span><br><span class="line">    &lt;/p&gt;</span><br><span class="line">    &lt;p&gt;</span><br><span class="line">        &lt;span&gt;最后更新:&lt;/span&gt;&#123;&#123; page<span class="selector-class">.updated</span>.format(<span class="string">"YYYY年MM月DD日 - HH:mm:ss"</span>) &#125;&#125;</span><br><span class="line">    &lt;/p&gt;</span><br><span class="line">    &lt;p&gt;</span><br><span class="line">        &lt;span&gt;原始链接:&lt;/span&gt;</span><br><span class="line">        &lt;<span class="selector-tag">a</span> href=<span class="string">"&#123;&#123; url_for(page.path) &#125;&#125;"</span> title=<span class="string">"&#123;&#123; page.title &#125;&#125;"</span>&gt;&#123;&#123; page<span class="selector-class">.permalink</span> &#125;&#125;&lt;/a&gt;</span><br><span class="line">        &lt;<span class="selector-tag">span</span> class=<span class="string">"copy-path"</span>  title=<span class="string">"点击复制文章链接"</span>&gt;</span><br><span class="line">            &lt;<span class="selector-tag">i</span> class=<span class="string">"fa fa-clipboard"</span> data-clipboard-text=<span class="string">"&#123;&#123; page.permalink &#125;&#125;"</span>  aria-label=<span class="string">"复制成功！"</span>&gt;&lt;/i&gt;</span><br><span class="line">        &lt;/span&gt;</span><br><span class="line">    &lt;/p&gt;</span><br><span class="line">    &lt;p&gt;</span><br><span class="line">        &lt;span&gt;许可协议:&lt;/span&gt;</span><br><span class="line">        ©&lt;<span class="selector-tag">a</span> rel=<span class="string">"license"</span> href=<span class="string">"https://creativecommons.org/licenses/by-nc-nd/4.0/"</span> target=<span class="string">"_blank"</span> title=<span class="string">"Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)"</span>&gt;署名-非商业性使用-禁止演绎 <span class="number">4.0</span> 国际&lt;/a&gt; 转载请保留原文链接及作者。</span><br><span class="line">    &lt;/p&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;script&gt; </span><br><span class="line">    var clipboard = new Clipboard('.fa-clipboard');</span><br><span class="line">    clipboard.on(<span class="string">'success'</span>, $(function()&#123;</span><br><span class="line">        $(<span class="string">".fa-clipboard"</span>).click(function()&#123;</span><br><span class="line">            swal(&#123;   </span><br><span class="line">                title: <span class="string">""</span>,   </span><br><span class="line">                text: <span class="string">'复制成功'</span>,   </span><br><span class="line">                <span class="selector-tag">html</span>: false,</span><br><span class="line">                timer: <span class="number">500</span>,   </span><br><span class="line">                showConfirmButton: false\</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;));  </span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&#123;% endif %&#125;</span><br></pre></td></tr></table></figure>

<p>在<code>E:\HexoBlog\themes\next\layout\_macro\post.swig</code>中引用</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"> &lt;<span class="selector-tag">footer</span> class=<span class="string">"post-footer"</span>&gt;</span><br><span class="line">+    &lt;div&gt;</span><br><span class="line">+        &#123;% if not is_index %&#125;</span><br><span class="line">+            &#123;% include 'my-copyright.swig' %&#125;</span><br><span class="line">+        &#123;% endif %&#125;</span><br><span class="line">+    &lt;/div&gt;</span><br><span class="line">     &#123;%- if post.tags and post.tags.length %&#125;</span><br><span class="line">         &#123;%- if theme.tag_icon %&#125;</span><br><span class="line">             &#123;%- set tag_indicate = '&lt;i class="fa fa-tag"&gt;&lt;/i&gt;' %&#125;</span><br><span class="line">         &#123;% else %&#125;</span><br><span class="line">             &#123;%- set tag_indicate = '#' %&#125;</span><br><span class="line">         &#123;%- endif %&#125;</span><br><span class="line">         &lt;<span class="selector-tag">div</span> class=<span class="string">"post-tags"</span>&gt;</span><br><span class="line">             &#123;%- for tag in post.tags.toArray() %&#125;</span><br><span class="line">             &lt;<span class="selector-tag">a</span> href=<span class="string">"&#123;&#123; url_for(tag.path) &#125;&#125;"</span> rel=<span class="string">"tag"</span>&gt;&#123;&#123; tag_indicate &#125;&#125; &#123;&#123; tag<span class="selector-class">.name</span> &#125;&#125;&lt;/a&gt;</span><br><span class="line">             &#123;%- endfor %&#125;</span><br><span class="line">         &lt;/div&gt;</span><br><span class="line">     &#123;%- endif %&#125;</span><br><span class="line">     &#123;&#123; partial(<span class="string">'_partials/post/post-footer.swig'</span>, &#123;&#125;, &#123;cache: theme<span class="selector-class">.cache</span>.enable&#125;) &#125;&#125;</span><br><span class="line">     &#123;&#123; post_nav(post) &#125;&#125;</span><br><span class="line"> &lt;/footer&gt;</span><br></pre></td></tr></table></figure>

<p>在<code>E:\HexoBlog\themes\next\source\css\_common\components\post</code>中新增样式文件<code>my-post-copyright.styl</code></p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.my_post_copyright</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">85%</span>;</span><br><span class="line">  <span class="attribute">max-width</span>: <span class="number">45em</span>;</span><br><span class="line">  <span class="attribute">margin</span>: <span class="number">2.8em</span> auto <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">padding</span>: <span class="number">0.5em</span> <span class="number">1.0em</span>;</span><br><span class="line">  <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#d3d3d3</span>;</span><br><span class="line">  <span class="attribute">font-size</span>: <span class="number">0.93rem</span>;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.6em</span>;</span><br><span class="line">  <span class="attribute">word-break</span>: break-all;</span><br><span class="line">  <span class="attribute">background</span>: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.4</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> p&#123;<span class="attribute">margin</span>:<span class="number">0</span>;&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">span</span> &#123;</span><br><span class="line">  <span class="attribute">display</span>: inline-block;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">5.2em</span>;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#333333</span>; <span class="comment">// title color</span></span><br><span class="line">  <span class="attribute">font-weight</span>: bold;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.raw</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">1em</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">5em</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">a</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">  <span class="attribute">border-bottom</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-tag">a</span>:hover &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#0593d3</span>; <span class="comment">// link color</span></span><br><span class="line">  <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span>:hover <span class="selector-class">.fa-clipboard</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.post-url</span>:hover &#123;</span><br><span class="line">  <span class="attribute">font-weight</span>: normal;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.copy-path</span> &#123;</span><br><span class="line">  <span class="attribute">margin-left</span>: <span class="number">1em</span>;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">1em</span>;</span><br><span class="line">  +mobile()&#123;<span class="attribute">display</span>:none;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.my_post_copyright</span> <span class="selector-class">.copy-path</span>:hover &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#808080</span>;</span><br><span class="line">  <span class="attribute">cursor</span>: pointer;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>文章末尾增加版权信息 - 非自定义方法</strong></p>
<p>在<code>%HEXO_HOME%\themes\next\_config.yml</code>中搜索<code>creative_commons</code></p>
<p>配置如下：</p>
<figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">creative_commons:</span></span><br><span class="line">  <span class="attr">license:</span> <span class="string">by-nc-sa</span></span><br><span class="line">  <span class="attr">sidebar:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">post:</span> <span class="literal">true</span></span><br><span class="line">  <span class="attr">language:</span> <span class="string">zh-CN</span></span><br></pre></td></tr></table></figure>

<p>PS：对应的配置文件在<code>%HEXO_HOME%\themes\next\layout\_partials\post\post-copyright.swig</code></p>
<p><strong>设置透明背景</strong>：(为了让背景动画有用武之地）</p>
<p>路径：<code>E:\HexoBlog\themes\next\source\css</code>中的<code>_colors.styl</code>文件定义了全局颜色</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">:root &#123;</span><br><span class="line">  --body-bg-<span class="attribute">color</span>: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.5</span>); <span class="comment">// 背景 影响sidebar</span></span><br><span class="line">  --<span class="attribute">content</span>-bg-color: rgba(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0.5</span>); <span class="comment">// 文字背景 影响文章背景色</span></span><br><span class="line">  --card-bg-<span class="attribute">color</span>: <span class="variable">$card</span>-bg-color;</span><br><span class="line">  --text-<span class="attribute">color</span>: <span class="variable">$text</span>-color;</span><br><span class="line">  --blockquote-<span class="attribute">color</span>: <span class="variable">$blockquote</span>-color;</span><br><span class="line">  --link-<span class="attribute">color</span>: <span class="variable">$link</span>-color;</span><br><span class="line">  --link-hover-<span class="attribute">color</span>: <span class="variable">$link</span>-hover-color;</span><br><span class="line">  --brand-<span class="attribute">color</span>: <span class="variable">$brand</span>-color;</span><br><span class="line">  --brand-hover-<span class="attribute">color</span>: <span class="variable">$brand</span>-hover-color;</span><br><span class="line">  --table-row-odd-bg-<span class="attribute">color</span>: <span class="variable">$table</span>-row-odd-bg-color;</span><br><span class="line">  --table-row-hover-bg-<span class="attribute">color</span>: <span class="variable">$table</span>-row-hover-bg-color;</span><br><span class="line">  --menu-item-bg-<span class="attribute">color</span>: <span class="variable">$menu</span>-item-bg-color;</span><br><span class="line">  --btn-default-bg: rgba(255,255,255,0); // 按钮背景 影响阅读全文 按钮</span><br><span class="line">  --btn-default-<span class="attribute">color</span>: <span class="variable">$btn</span>-default-color;</span><br><span class="line">  --btn-default-<span class="attribute">border-color</span>: <span class="variable">$btn</span>-default-border-color;</span><br><span class="line">  --btn-default-hover-bg: $btn-default-hover-bg;</span><br><span class="line">  --btn-default-hover-<span class="attribute">color</span>: <span class="variable">$btn</span>-default-hover-color;</span><br><span class="line">  --btn-default-hover-<span class="attribute">border-color</span>: <span class="variable">$btn</span>-default-hover-border-color;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>插入网易云音乐</strong></p>
<p>打开<code>%HEXO_HOME%\themes\next\layout\</code></p>
<p>在需要展示音乐的位置增加（歌曲：从前慢（歌手：宋玥 cover：林炫清））</p>
<p>这边是增加在<code>E:\HexoBlog\themes\next\layout\_partials\sidebar\site-overview.swig</code>中</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"music_163"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">iframe</span> <span class="attr">frameborder</span>=<span class="string">"no"</span> <span class="attr">border</span>=<span class="string">"0"</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">marginwidth</span>=<span class="string">"0"</span> <span class="attr">marginheight</span>=<span class="string">"0"</span> <span class="attr">height</span>=<span class="string">86</span> </span></span><br><span class="line"><span class="tag">            <span class="attr">src</span>=<span class="string">"//music.163.com/outchain/player?type=2&amp;id=1417959188&amp;auto=1&amp;height=66"</span></span></span><br><span class="line"><span class="tag">            &gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>音乐播放器代码来源：网易云 - 生成外链即可</p>
<p><strong>彩色标签页配置</strong></p>
<p>在<code>E:\HexoBlog\themes\next\layout</code>新增<code>tag-color.swig</code></p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">     var alltags = document.getElementsByClassName('tag-cloud-tags');</span><br><span class="line">     var tags = alltags[0].getElementsByTagName('a');</span><br><span class="line">     for (var i = tags.length - 1; i &gt;= 0; i--) &#123;</span><br><span class="line">       var r=Math.floor(Math.random()*75+130);</span><br><span class="line">       var g=Math.floor(Math.random()*75+100);</span><br><span class="line">       var b=Math.floor(Math.random()*75+80);</span><br><span class="line">       tags[i].style.background = "rgb("+r+","+g+","+b+")";</span><br><span class="line">     &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">  .tag-cloud-tags&#123;</span><br><span class="line">    <span class="attribute">font-family</span>: Helvetica, Tahoma, Arial;</span><br><span class="line">    <span class="attribute">font-weight</span>: <span class="number">100</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">counter-reset</span>: tags;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.tag-cloud-tags</span> a&#123;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">6px</span>;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">8px</span> <span class="number">5px</span> <span class="number">0px</span> <span class="number">0px</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="selector-class">.tag-cloud-tags</span> <span class="selector-tag">a</span>:before&#123;</span><br><span class="line">    <span class="attribute">content</span>:  <span class="string">"🔖"</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="selector-class">.tag-cloud-tags</span> <span class="selector-tag">a</span>:hover&#123;</span><br><span class="line">     box-shadow: 0px 5px 15px 0px rgba(0,0,0,.4);</span><br><span class="line">     <span class="attribute">transform</span>: scale(<span class="number">1.1</span>);</span><br><span class="line">     <span class="comment">/*box-shadow: 10px 10px 15px 2px rgba(0,0,0,.12), 0 0 6px 0 rgba(104, 104, 105, 0.1);*/</span></span><br><span class="line">     <span class="attribute">transition-duration</span>: <span class="number">0.15s</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>

<p>在<code>E:\HexoBlog\themes\next\layout\page.swig</code>中引用</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"> &lt;<span class="selector-tag">div</span> class=<span class="string">"post-block"</span> lang=<span class="string">"&#123;&#123; page.lang or config.language &#125;&#125;"</span>&gt;</span><br><span class="line">       &#123;% include '_partials/page/page-header.swig' %&#125;</span><br><span class="line">       &#123;#################&#125;</span><br><span class="line">       &#123;### PAGE BODY ###&#125;</span><br><span class="line">       &#123;#################&#125;</span><br><span class="line">       &lt;<span class="selector-tag">div</span> class=<span class="string">"post-body&#123;%- if page.direction and page.direction.toLowerCase() === 'rtl' %&#125; rtl&#123;%- endif %&#125;"</span>&gt;</span><br><span class="line">         &#123;%- if page.type === 'tags' %&#125;</span><br><span class="line">           &lt;<span class="selector-tag">div</span> class=<span class="string">"tag-cloud"</span>&gt;</span><br><span class="line">             &lt;<span class="selector-tag">div</span> class=<span class="string">"tag-cloud-title"</span>&gt;</span><br><span class="line">               &#123;&#123; _p(<span class="string">'counter.tag_cloud'</span>, site<span class="selector-class">.tags</span>.length) &#125;&#125;</span><br><span class="line">             &lt;/div&gt;</span><br><span class="line">             &lt;<span class="selector-tag">div</span> class=<span class="string">"tag-cloud-tags"</span>&gt;</span><br><span class="line">               &#123;&#123; tagcloud(&#123;</span><br><span class="line">                 min_font   : theme<span class="selector-class">.tagcloud</span><span class="selector-class">.min</span>,</span><br><span class="line">                 max_font   : theme<span class="selector-class">.tagcloud</span><span class="selector-class">.max</span>,</span><br><span class="line">                 amount     : theme<span class="selector-class">.tagcloud</span><span class="selector-class">.amount</span>,</span><br><span class="line">                 <span class="attribute">color</span>      : true,</span><br><span class="line">                 start_color: theme<span class="selector-class">.tagcloud</span><span class="selector-class">.start</span>,</span><br><span class="line">                 end_color  : theme.tagcloud.end&#125;)</span><br><span class="line">               &#125;&#125;</span><br><span class="line">             &lt;/div&gt;</span><br><span class="line">           &lt;/div&gt;</span><br><span class="line">+          &#123;% include 'tag-color.swig' %&#125;</span><br><span class="line">         &#123;% elif page.type === 'categories' %&#125;</span><br><span class="line">           &lt;<span class="selector-tag">div</span> class=<span class="string">"category-all-page"</span>&gt;</span><br><span class="line">             &lt;<span class="selector-tag">div</span> class=<span class="string">"category-all-title"</span>&gt;</span><br><span class="line">               &#123;&#123; _p(<span class="string">'counter.categories'</span>, site<span class="selector-class">.categories</span>.length) &#125;&#125;</span><br><span class="line">             &lt;/div&gt;</span><br><span class="line">             &lt;<span class="selector-tag">div</span> class=<span class="string">"category-all"</span>&gt;</span><br><span class="line">               &#123;&#123; list_categories() &#125;&#125;</span><br><span class="line">             &lt;/div&gt;</span><br><span class="line">           &lt;/div&gt;</span><br><span class="line">         &#123;% elif page.type === 'schedule' %&#125;</span><br><span class="line">           &lt;<span class="selector-tag">div</span> class=<span class="string">"event-list"</span>&gt;</span><br><span class="line">           &lt;/div&gt;</span><br><span class="line">           &#123;% include '_scripts/pages/schedule.swig' %&#125;</span><br><span class="line">         &#123;% else %&#125;</span><br><span class="line">           &#123;&#123; page<span class="selector-class">.content</span> &#125;&#125;</span><br><span class="line">         &#123;%- endif %&#125;</span><br><span class="line">       &lt;/div&gt;</span><br></pre></td></tr></table></figure>

<p><strong>添加sitemap</strong></p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> sitemap插件 二选其一</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> cnpm install hexo-generator-sitemap -D</span></span><br><span class="line"><span class="meta">#</span><span class="bash"> 百度的sitemap</span></span><br><span class="line"><span class="meta">$</span><span class="bash"> cnpm install hexo-generator-baidu-sitemap -D</span></span><br></pre></td></tr></table></figure>

<p>执行<code>hexo s</code>后输入<br>sitemap地址：<code>http://localhost:4000/sitemap.xml</code><br>百度sitemap地址：<code>http://localhost:4000/baidusitemap.xml</code><br>sitemap可用于搜索引擎录入</p>
</li>
</ol>
<h1 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h1><ul>
<li>附上主题配置文件<a style="color:#1196EE" href="../../../../files/200512-hexo/next_config.txt" target="view_window">_config.yml</a></li>
</ul>

    </div>

    
    
    
        <div class="reward-container">
  <div><font color="#FF0000">------------本文结束<i class="fa fa-paw"></i>感谢您的阅读------------</font><br/><br/>Thank you for your accept！</div>
  <button onclick="var qr = document.getElementById('qr'); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
      
      <div style="display: inline-block;">
        <img src="/imgs/a_icon_pay_wechat.png" alt="yooking 微信支付">
        <p>微信支付</p>
      </div>
      
      <div style="display: inline-block;">
        <img src="/imgs/a_icon_pay_ali.png" alt="yooking 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

	  

      <footer class="post-footer">
		<div>
			
				
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

  <p><span>本文标题:</span>开启Hexo之路</a></p>
  <p><span>文章作者:</span>yooking</a></p>
  <p><span>发布时间:</span>2020年05月13日 - 08:59:01</p>
  <p><span>最后更新:</span>2020年05月14日 - 19:26:05</p>
  <p><span>原始链接:</span><a href="/blog/200512-hexo.html" title="开启Hexo之路">http://blog.yookingh.cn/blog/200512-hexo.html</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://blog.yookingh.cn/blog/200512-hexo.html"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span>© <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '复制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>

			
		</div>
          
          <div class="post-tags">
              <a href="/tags/study/" rel="tag"><i class="fa fa-tag"></i> 学习笔记</a>
              <a href="/tags/Hexo/" rel="tag"><i class="fa fa-tag"></i> Hexo</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/dev/200512-flutter.html" rel="prev" title="Flutter踩坑日记">
      <i class="fa fa-chevron-left"></i> Flutter踩坑日记
    </a></div>
      <div class="post-nav-item">
    <a href="/dev/200514-bug-flash.html" rel="next" title="Android页面跳转时前一个页面闪现问题">
      Android页面跳转时前一个页面闪现问题 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">
      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#安装"><span class="nav-number">2.</span> <span class="nav-text">安装</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#准备工作"><span class="nav-number">2.1.</span> <span class="nav-text">准备工作</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#安装和部署"><span class="nav-number">2.2.</span> <span class="nav-text">安装和部署</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#最后"><span class="nav-number">3.</span> <span class="nav-text">最后</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="yooking"
      src="/imgs/a_icon_head.jpg">
  <p class="site-author-name" itemprop="name">yooking</p>
  <div class="site-description" itemprop="description"></div>
</div>

<div id="music_163">
	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" height=86 src="//music.163.com/outchain/player?type=2&id=1417959188&auto=1&height=66"></iframe>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">23</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yooking-git" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yooking-git" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:android_yoo@126.com" title="E-Mail → mailto:android_yoo@126.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://www.chensheng.group/" title="https:&#x2F;&#x2F;www.chensheng.group&#x2F;" rel="noopener" target="_blank">陈先生的小前端</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://github.com/theme-next" title="https:&#x2F;&#x2F;github.com&#x2F;theme-next" rel="noopener" target="_blank">NexT主题Github</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://hexo-theme-next.netlify.app/" title="https:&#x2F;&#x2F;hexo-theme-next.netlify.app&#x2F;" rel="noopener" target="_blank">NexT主题博客</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 2019 – 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">yooking</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-chart-area"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">118k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">1:47</span>
</div>
<div>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("04/07/2019 00:00:00");
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
setInterval("createtime()",250);
</script>
</div>


  <script src='https://unpkg.com/mermaid@7.1.2/dist/mermaid.min.js'></script>
  <script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
  </script>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script color='0,0,0' opacity='0.7' zIndex='-1' count='140' src="/lib/canvas-nest/canvas-nest-nomobile.min.js"></script>
  <script size="300" alpha="0.1" zIndex="-1" src="/lib/canvas-ribbon/canvas-ribbon.js"></script>
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  




  
<script src="/js/local-search.js"></script>









<script>
document.querySelectorAll('.pdfobject-container').forEach(element => {
  let url = element.dataset.target;
  let pdfOpenParams = {
    navpanes : 0,
    toolbar  : 0,
    statusbar: 0,
    pagemode : 'thumbs',
    view     : 'FitH'
  };
  let pdfOpenFragment = '#' + Object.entries(pdfOpenParams).map(([key, value]) => `${key}=${encodeURIComponent(value)}`).join('&');
  let fullURL = `/lib/pdf/web/viewer.html?file=${encodeURIComponent(url)}${pdfOpenFragment}`;

  if (NexT.utils.supportsPDFs()) {
    element.innerHTML = `<embed class="pdfobject" src="${url + pdfOpenFragment}" type="application/pdf" style="height: ${element.dataset.height};">`;
  } else {
    element.innerHTML = `<iframe src="${fullURL}" style="height: ${element.dataset.height};" frameborder="0"></iframe>`;
  }
});
</script>


<script>
if (document.querySelectorAll('pre.mermaid').length) {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js', () => {
    mermaid.initialize({
      theme    : 'default',
      logLevel : 3,
      flowchart: { curve     : 'linear' },
      gantt    : { axisFormat: '%m/%d/%Y' },
      sequence : { actorMargin: 50 }
    });
  }, window.mermaid);
}
</script>


  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el         : '#valine-comments',
      verify     : false,
      notify     : false,
      appId      : 'uutufTwYVUeCtemIaV78RUzY-gzGzoHsz',
      appKey     : 'EWtCrVS44F22gkjWkQ15x4lx',
      placeholder: "恭迎评论指教（Your comments and criticisms are always welcome.）",
      avatar     : 'mp',
      meta       : guest,
      pageSize   : '10' || 10,
      visitor    : false,
      lang       : '' || 'zh-cn',
      path       : location.pathname,
      recordIP   : true,
      serverURLs : ''
    });
  }, window.Valine);
});
</script>

</body>
</html>
